<!--  -->
<template>
    <div class="odc-ui-workflowButton-box">
        <div class="odc-ui-workflowButton-backbtn">
            <div class="odc-ui-workflowButton-title">{{btnTitle?btnTitle:t('task.applicationForm')}}</div>
            <el-button @click="backBtn">
                {{ t('task.back') }}
            </el-button>
        </div>
        <!--按钮组-->
        <div class="odc-ui-workflowButton-btn" v-if="pageType==='1'||pageType==='2'||pageType==='3'">
            <div v-for="item in optionButtons" :key="item.buttonKey">
                <el-button type="primary" @click="buttonHandler(item.buttonKey)" >
                    {{item.buttonName}}
                </el-button>
            </div>
        </div>
          <!-- 审批|退回操作|退回申请人后重新提交操作 -->
          <OdcDialog
          :title="dialogObj.dialogTitle"
          :visible="dialogObj.dialogVisible"
          @cancelCb="dialogCancel"
          @confirmCb="dialogConfirm"
          :cancelText="t('task.back')"
          :confirmText="t('task.confirm')"
          :isShowFooter="true"
          :showBodyScrollbar="false"
      >
       <div v-loading="dialogLoading">
         <el-form :model="formInline" label-width="100">
               <!-- 下一节点信息 -->
             <template v-if="!isBackOptions">
                 <div v-for="nodeItem in nextTaskObj.nextNodeApproverList" :key="nodeItem.taskKey">
                     <el-form-item :label="t('task.nextNode')" v-if="nodeItem.taskName">
                         <div>{{nodeItem.taskName}}</div>
                     </el-form-item>
                     <!--不是会签节点且不是结束节点-->
                     <el-form-item :label="t('task.approvalUser')" v-if="nodeItem.taskType!==3&&!nodeItem.counterSign&&nodeItem.userList&&nodeItem.userList.length>0">
                         <el-select multiple  filterable v-model="nodeItem.nextTaskUserIds"  v-if="nodeItem.userList&&nodeItem.userList.length>1">
                             <el-option v-for="nodeUerItem in nodeItem.userList" :key="nodeUerItem.userId" :label="nodeUerItem.nickName" :value="nodeUerItem.userId" />
                         </el-select>
                         <template v-if="nodeItem.userList&&nodeItem.userList.length===1" >
                             <div v-for="nodeUerItem in nodeItem.userList" :key="nodeUerItem.userId">{{nodeUerItem.nickName}}</div>
                         </template>
                     </el-form-item>
                     <!--会签节点且不是结束节点-->
                     <el-form-item :label="t('task.approvalUser')" v-if="nodeItem.taskType!==3&&nodeItem.counterSign&&nodeItem.userList&&nodeItem.userList.length>0">
                         <template>
                             <div v-for="(nodeUerItem,nodeUerIndex) in nodeItem.userList" :key="nodeUerItem.userId">
                                 {{nodeUerItem.nickName}}
                                 <template v-if="(nodeUerIndex+1)!==nodeItem.userList.length">,</template>
                             </div>
                         </template>
                     </el-form-item>
                 </div>
             </template>
             <el-form-item :label="t('task.taskNodeList')" v-if="isBackOptions&&formInline.returnType === 2">
                 <el-select filterable :loading="dialogReturnListLoading" v-model="formInline.targetTaskKey" :placeholder="t('task.pleaseSelect')">
                     <el-option
                         v-for="item in nextTaskObj.returnList"
                         :key="item.taskKey"
                         :label="item.taskName"
                         :value="item.taskKey"
                     >
                     </el-option>
                 </el-select>
             </el-form-item>
            <!--紧急程度  -->
             <el-form-item :label="t('task.priority')" v-if="!isBackOptions">
                 <el-radio v-model="formInline.priority" :label="item.value" v-for="item in priorityOptions" :key="item.value">{{item.label}}</el-radio>
             </el-form-item>
             <!-- 审批意见 -->
              <el-form-item :label="t('task.approvalOpinions')" v-if="!isPromoter">
                     <el-input
                         type="textarea"
                         v-model="formInline.approvalComments"
                     >
                     </el-input>
                      <span class="odc-ui-workflowButton-approvalOpinion" @click="openCommonApproveOptions">常用审批意见</span>
                 </el-form-item>
                 <!--抄送人-->
              <el-form-item :label="t('task.sendUser')">
                  <div class="odc-ui-workflowButton-cusInput"  @click="showUserDialog('curCopyUserList')">
                      <!--流程里带过来的信息 -->
                      <div v-for="(curItem,curIndex) in copyUserDialogObj.userList" :key="curItem.userId">
                          {{curItem.nickName}}
                          <template v-if="(curIndex+1)!==copyUserDialogObj.userList.length">,</template>
                      </div>
                      <div v-for="(curItem,curIndex) in formInline.curCopyUserList" :key="curItem.id">
                          {{curItem.nickName}}
                          <template v-if="(curIndex+1)!==formInline.curCopyUserList.length">,</template>
                      </div>
                      <img style="width:14px;height:14px;margin-top:8px;cursor: pointer;" src="../../images/close.png" alt=""  @click.stop="handleUserDelete('curCopyUserList')" v-if="formInline.curCopyUserList&&formInline.curCopyUserList.length>0">
                  </div>
              </el-form-item>
        </el-form>
       </div>
            </OdcDialog>

      <!-- 常用审批意见 -->
        <OdcDialog
      :title="approveOptionsDialogObj.dialogTitle"
      :visible="approveOptionsDialogObj.dialogVisible"
      @cancelCb="approveOptionsDialogCancel"
      @confirmCb="approveOptionsDialogConfirm"
      :isShowFooter="true"
      :showBodyScrollbar="false"
  >
      <el-table
          height="220px"
          :data="commonApprovalOpinions"
          style="width: 100%"
          @current-change="handleOptionChange"
          highlight-current-row
      >
          <el-table-column prop="labelLang" :label="t('task.approvalOpinions')"> </el-table-column>
      </el-table>
        </OdcDialog>

       <!--选则抄送人-->
        <OdcDialog
        class="odc-ui-workflowbutton-userdialog"
        :title="userDialogObj.dialogTitle"
        :visible="userDialogObj.dialogVisible"
        @cancelCb="userDialogCancel"
        @confirmCb="userDialogConfirm"
        :isShowFooter="true"
    >
        <div class="odc-ui-workflowbutton-dialogbox" style="margin-bottom:20px">
            <div style="display: flex;">
                <el-input :placeholder="t('task.selectPersonnel')" v-model="userDialogObj.searchName"></el-input>
            </div>
            <div  style="display: flex;">
                <el-button type="primary" @click="onUserDialogSearch">{{t('common.search')}}</el-button>
                <el-button @click="onUserDialogResetForm">{{t('common.reset')}}</el-button>
            </div>
        </div>
        <!--多选-->
        <el-table
            height="240px"
            v-if=" userDialogObj.curType !=='curAssigneeObj'"
            v-loading="userDialogObj.loading"
            :data="userDialogObj.userList"
            style="width: 100%"
            ref="multipleTable"
            highlight-current-row
            @selection-change="handleUserDataSelectionChange"
        >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="nickName" :label="t('system.nickName')"> </el-table-column>
            <el-table-column prop="username" :label="t('system.userName')"> </el-table-column>
            <el-table-column prop="mobile" :label="t('system.mobile')"></el-table-column>
            <el-table-column prop="orgDeptName" :label="t('system.deptm')"></el-table-column>
        </el-table>
        <!--单选-->
        <el-table
            height="240px"
            v-if=" userDialogObj.curType ==='curAssigneeObj'"
            v-loading="userDialogObj.loading"
            :data="userDialogObj.userList"
            style="width: 100%"
            ref="singleTable"
            @current-change="handleUserDataCurrentChange"
            highlight-current-row
        >
            <el-table-column prop="nickName" :label="t('system.nickName')"> </el-table-column>
            <el-table-column prop="username" :label="t('system.userName')"> </el-table-column>
            <el-table-column prop="mobile" :label="t('system.mobile')"></el-table-column>
            <el-table-column prop="orgDeptName" :label="t('system.deptm')"></el-table-column>
        </el-table>
        <div style="display: flex;justify-content: flex-end;padding-right: 20px">
            <el-pagination
                style="margin-top: 10px"
                size="small"
                v-model:current-page="userDialogObj.currentPage"
                v-model:page-size="userDialogObj.pageSize"
                :page-sizes="[10, 20, 30, 40, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="userDialogObj.total"
                @size-change="handleUserSizeChange"
                @current-change="handleUserCurrentChange"
            />
        </div>
        </OdcDialog>

     <!-- 审批拒绝操作 -->
        <OdcDialog
        :title="dialogObj.dialogTitle"
        :visible="dialogObj.refuseDialogVisible"
        @cancelCb="dialogCancel"
        @confirmCb="refuseDialogConfirm"
        :cancelText="t('task.back')"
        :confirmText="t('task.confirm')"
        :isShowFooter="true"
        :showBodyScrollbar="false"
    >
        <div v-loading="dialogLoading">
            <el-form :model="formInline" label-width="100">
                <el-form-item :label="t('task.refuseReason')">
                    <el-input
                        type="textarea"
                        v-model="formInline.approvalComments"
                    >
                    </el-input>
                    <span class="odc-ui-workflowButton-approvalOpinion" @click="openCommonApproveOptions">常用审批意见</span>
                </el-form-item>
                <!--抄送人-->
                <el-form-item :label="t('task.sendUser')">
                    <div class="odc-ui-workflowButton-cusInput"  @click="showUserDialog('curCopyUserList')">
                        <!--流程里带过来的信息  style="display: flex"-->
                        <template v-for="(curItem,curIndex) in copyUserDialogObj.userList" :key="curItem.userId">
                            {{curItem.nickName}}
                            <template v-if="(curIndex+1)!==copyUserDialogObj.userList.length">,</template>
                        </template>
                        <template v-for="(curItem,curIndex) in formInline.curCopyUserList" :key="curItem.id">
                            {{curItem.nickName}}
                            <template v-if="(curIndex+1)!==formInline.curCopyUserList.length">,</template>
                        </template>
                        <img style="width:14px;height:14px;margin-top:8px;cursor: pointer;" src="../../images/close.png" alt=""  @click.stop="handleUserDelete('curCopyUserList')" v-if="formInline.curCopyUserList&&formInline.curCopyUserList.length>0">
                    </div>
                </el-form-item>
            </el-form>
        </div>
        </OdcDialog>
        <!--终止-->
        <OdcDialog
                :title="terminationDialogObj.dialogTitle"
                :visible="terminationDialogObj.dialogVisible"
                @cancelCb="terminationDialogCancel"
                @confirmCb="terminationDialogConfirm"
                :isShowFooter="true"
                :showBodyScrollbar="false"
        >
            <div>
                <el-form label-width="100">
                    <el-form-item :label="t('task.stopReason')">
                        <el-input
                                type="textarea"
                                v-model="terminationDialogObj.stopReason"
                        >
                        </el-input>
                    </el-form-item>
              </el-form>
            </div>
        </OdcDialog>
             <!--更多-->
         <OdcDialog
             :title="moreDialogObj.dialogTitle"
             :visible="moreDialogObj.dialogVisible"
             @cancelCb="moreDialogCancel"
             @confirmCb="moreDialogConfirm"
             :cancelText="t('task.back')"
             :confirmText="t('task.confirm')"
             :isShowFooter="true"
             :showBodyScrollbar="false"
         >
             <div>
                 <div v-if="moreDialogObj.commondStr === 'delegate'|| moreDialogObj.commondStr === 'transfer'" >
                     <el-form :model="moreFormInline" label-width="100">
                         <el-form-item :label="moreDialogObj.dialogLabel">
                             <!--转办 委托-->
                             <div @click="showUserDialog('curAssigneeObj')"  class="odc-ui-workflowButton-cusInput">
                                 <template v-if="moreFormInline.curAssigneeObj.nickName">
                                     {{moreFormInline.curAssigneeObj.nickName}}
                                 </template>
                                 <img style="width:14px;height:14px;margin-top:8px;cursor: pointer;" src="../../images/close.png" alt=""  @click.stop="handleUserDelete('curAssigneeObj')" v-if="moreFormInline.curAssigneeObj.nickName">
                             </div>
                         </el-form-item>
                         <el-form-item :label="moreDialogObj.commondStr === 'delegate'?t('task.entrustmentDescription'):t('task.transferInstructions')">
                             <el-input
                                 type="textarea"
                                 v-model="moreFormInline.reason"
                             >
                             </el-input>
                         </el-form-item>
                     </el-form>
                 </div>
                 <div v-else>
                     <el-form :model="moreFormInline" label-width="100">
                         <el-form-item :label="t('task.addSignType')" v-if="moreDialogObj.commondStr === 'addSign'">
                             <el-radio v-model="moreFormInline.direct" label="forward">{{t('task.forward')}}</el-radio>
                             <el-radio v-model="moreFormInline.direct" label="backward">{{t('task.backward')}}</el-radio>
                         </el-form-item>
                         <!--增加审批人-->
                         <el-form-item :label="t('task.addApprover')" v-if="moreDialogObj.commondStr === 'addInstance' || moreDialogObj.commondStr === 'addSign'">
                             <div @click="showUserDialog('curAssigneeArr')" class="odc-ui-workflowButton-cusInput">
                                 <template v-for="(curItem,curIndex) in moreFormInline.curAssigneeArr" :key="curItem.id">
                                     {{curItem.nickName}}
                                     <template v-if="(curIndex+1)!==moreFormInline.curAssigneeArr.length">,</template>
                                 </template>
                                 <img style="width:14px;height:14px;margin-top:8px;cursor: pointer;" src="../../images/close.png" alt=""  @click.stop="handleUserDelete('curAssigneeArr')" v-if="moreFormInline.curAssigneeArr&&moreFormInline.curAssigneeArr.length>0">
                             </div>
                         </el-form-item>
                         <el-form-item :label="t('task.addSignOrder')" v-if="moreDialogObj.commondStr === 'addSign' && moreFormInline.curAssigneeArr && moreFormInline.curAssigneeArr.length > 1">
                             <el-radio v-model="moreFormInline.sequential" :label=true>{{t('task.serial')}}</el-radio>
                             <el-radio v-model="moreFormInline.sequential" :label=false>{{t('task.parallel')}}</el-radio>
                         </el-form-item>
                         <el-form-item :label="t('task.addSignReason')"  v-if="moreDialogObj.commondStr === 'addSign'">
                             <el-input
                                 type="textarea"
                                 v-model="moreFormInline.reason"
                             >
                             </el-input>
                         </el-form-item>
                         <el-form-item :label="t('task.removeApprover')" v-if="moreDialogObj.commondStr === 'removeInstance'">
                             <el-select filterable multiple :loading="dialogSignTaskUserListLoading" v-model="moreFormInline.assigneeArr" :placeholder="t('task.pleaseSelect')">
                                 <el-option
                                     v-for="item in nextTaskObj.counterSignTaskUserList"
                                     :key="item.id"
                                     :label="item.nickName"
                                     :value="item.id"
                                 >
                                 </el-option>
                             </el-select>
                         </el-form-item>
                     </el-form>
                 </div>
             </div>
         </OdcDialog>
         <!-- 催办 -->
         <OdcDialog
            :title="urgingDialogObj.dialogTitle"
            :visible="urgingDialogObj.dialogVisible"
            @cancelCb="urgingDialogCancel"
            @confirmCb="urgingDialogConfirm"
            :isShowFooter="true"
            :showBodyScrollbar="false">
            <div>
                <el-form
                ref="urgentFormRef"
                :model="urgentFormData"
               
                label-width="100">

                    <el-form-item :label="t('task.urgentNode')" prop="taskKey">
                        <el-select v-model="urgentFormData.taskKey" @change="taskKeyChange" v-if="urgeTaskList&&urgeTaskList.length>1">
                            <el-option v-for="item in urgeTaskList" :key="item.taskKey" :label="item.taskName" :value="item.taskKey"/>
                        </el-select>
                        <div v-if="urgeTaskList&&urgeTaskList.length===1">{{urgeTaskList[0].taskName}}</div>
                    </el-form-item>
                    <el-form-item :label="t('task.urgentMethod')" prop="urgeType">
                          <el-radio-group v-model="urgentFormData.urgeType" >
                            <el-radio  v-for="item in urgeTypeList" :label="item.label" :value="item.value"  :key="item.value"></el-radio>
                          </el-radio-group>
                    </el-form-item>
                    <el-form-item :label="t('task.urgedPerson')" prop="userList">
                        <el-checkbox-group v-model="urgentFormData.userList">
                            <el-checkbox v-for="item in urgeUserList" :label="item.userName" :value="item.userId"  :key="item.userId"/>
                          </el-checkbox-group>
                    </el-form-item>
                </el-form>
            </div>
        </OdcDialog>
        <!-- 删除或撤回 -->
        <!-- 需要提出公共 提示弹窗样式 -->
        <!-- <easy-dialog
        v-model:formVisible="deleteOrRevokeDialog.dialogVisible"
        :content="deleteOrRevokeDialog.content"
        :isShowFooter="true"
        @submit="deleteOrRevokeConfirm"
/> -->
        <OdcDialog
            :showWarnTip="true"
            :visible="deleteOrRevokeDialog.dialogVisible"
            :isShowFooter="true"
            :showBodyScrollbar="false"
            :content="deleteOrRevokeDialog.content"
            @confirmCb="deleteOrRevokeConfirm"
            @cancelCb="deleteOrRevokeDialog.dialogVisible=false"
        />
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import OdcButton from '../OdcButton.vue';
export default {
// import引入的组件需要注入到对象中才能使用
  components: {OdcButton},
  data  () {
// 这里存放数据
    return {

    }
  },
// 监听属性 类似于data概念
  computed: {},
// 监控data中的数据变化
  watch: {},
// 方法集合
  methods: {

  },
// 生命周期 - 创建完成（可以访问当前this实例）
  created  () {

  },
// 生命周期 - 挂载完成（可以访问DOM元素）
  mounted  () {

  },
  beforeCreate  () {}, // 生命周期 - 创建之前
  beforeMount  () {}, // 生命周期 - 挂载之前
  beforeUpdate  () {}, // 生命周期 - 更新之前
  updated  () {}, // 生命周期 - 更新之后
  beforeDestroy  () {}, // 生命周期 - 销毁之前
  destroyed  () {}, // 生命周期 - 销毁完成
  activated  () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style >
.odc-ui-workflowButton-box {
    width: 100%;
}
.odc-ui-workflowButton-backbtn{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .odc-ui-workflowButton-title {
        font-size: 16px;
    }
    .odc-ui-workflowButton-btn {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 20px;
    }
    .odc-ui-workflowButton-approvalOpinion {
        margin-left: 10px;
        text-decoration: underline;
        color: #36a3f7;
    }

    .odc-ui-workflowButton-cusInput {
        display: flex;
        width:100%;
        border:0 solid #e5e7eb;
        justify-content: space-between;
        padding:0 11px;
        border-radius: 4px;
        min-height:30px;
        text-align: left;
        line-height:30px;
        color:rgb(96, 98, 102);
        box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
    }

    .odc-ui-workflowButton-cusInput .el-icon {
        color:rgb(168, 171, 178);
        top:6px;
        cursor: pointer;
    }
    .odc-ui-workflowbutton-dialogbox {
        display: flex;
        justify-content: space-between;
    }
    .odc-ui-workflowbutton-userdialog :deep(.el-dialog) {
        height: 460px;
        top: 50%;
        margin-top: -230px;
    }
    .odc-ui-workflowbutton-userdialog :deep(.dialog-body) {
        max-height: 370px !important;
    }
</style>